<template lang="pug">
.scene.pos-r(v-show="showScene && sceneList", @touchstart="handleToggleTouch")
  Scroll.scene-wrap(:data="getSceneList", :scrollX="true", ref="scrollSceneWrap")
    ul.scene-list(ref="sceneListWrap")
      li.scene-list-item(
        v-for="(item, index) in getSceneList",
        ref="sceneItem",
        :key="index",
        :style="[getComsumerStyle, sceneIndex == index ? getBdColorStyle : '']",
        :class="{'active': sceneIndex == index && !item.isLock}",
        @click="handleSceneSwitch(item, index, true)")
        i.iconfont.icon-info(v-if="item.dec", @click.stop='showSceneInfo(item.title, item.dec)')
        .lock(v-if="item.isLock")
          i.iconfont.icon-lock
        .img-box
          img(:style="getComsumerStyle" :src="item.full_thumb_url", alt="")
        .text.omit(:style="sceneIndex == index ? getColorStyle : ''")
          p(ref="text") {{item.title}}

  //- Scroll.group-wrap(v-if="getSceneGroup && showSceneGroup", :data="getSceneGroup", :scrollX="true", ref="scrollGroupWrap")
  //-   ul.scene-group(
  //-     v-if="getSceneGroup",
  //-     ref="sceneGroupWrap")
  //-     li.scene-group-item.pos-r(
  //-       ref="sceneGroupItem",
  //-       :key="index",
  //-       :title="group.album",
  //-       v-for="(group, index) in getSceneGroup",
  //-       @click="handleGroupSwitch(group.groupid, index)")
  //-       .rotate-bor
  //-       .img-box(:class="{'active': sceneGroupIndex == index}", :style="sceneGroupIndex == index ? getBdColorStyle : ''")
  //-         img(:src="group.scenelist[0].full_thumb_url", alt="")
  //-       p.text.omit.pos-a(:class="{'active': sceneGroupIndex == index}", :style="sceneGroupIndex == index ? getColorStyle : ''") {{group.album}}
  .group-wrap(v-if="getSceneGroup && showSceneGroup")
    ul.scene-group(
      v-if="getSceneGroup"
      v-scroll.x=''
      :style="`width: ${getWidth}px;`")
      li.scene-group-item.pos-r(
        :key="index",
        :title="group.album",
        v-for="(group, index) in getSceneGroup",
        @click="handleGroupSwitch(group.groupid, index)")
        .rotate-bor
        .img-box(:class="{'active': sceneGroupIndex == index}", :style="sceneGroupIndex == index ? getBdColorStyle : ''")
          img(:src="group.scenelist[0].full_thumb_url", alt="")
        p.text.omit.pos-a(:class="{'active': sceneGroupIndex == index}", :style="sceneGroupIndex == index ? getColorStyle : ''") {{group.album}}
</template>

<script>
import Scroll from 'Comps/Scroll'
import themeMixin from '@/mixins/theme'
import sceneMixin from '@/mixins/scene'
export default {
  name: 'sceneGroup',
  mixins: [themeMixin, sceneMixin],
  components: {
    Scroll
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/scene.styl'
@import '../../../assets/styles/mixin.styl'
$black = #000
$gray = #E5E9F2
.theme-app-b
  .scene
    padding: 8px 0 16px
    .scene-wrap
      min-height: 50px
    .scene-list
      .scene-list-item
        width: 70px
        height: 50px
        border-radius: 0px
        text-align: center
        border 2px solid #ffffff
        border-width 2px !important
        &.active
          border 2px solid #58b7ff
        & > .lock
          line-height: 50px
        & > img, .lock
          top: 0
          left: 0
          width: 70px
          height: 50px
        .img-box
          border-radius 0
          img
            border-radius 0
        .text
          background-color: rgba($black,.5)
    .scene-group
      height: 40px
      .scene-group-item
        display: inline-block
        width: 60px
        height: 40px
        box-shadow: none
        // overflow: hidden
        border none
        position relative
        margin-right 15px
        .rotate-bor
          width 100%
          height 100%
          position absolute
          z-index 2
          border 2px solid #ffffff
          transform-origin center
          transform rotate(-7deg)
        .img-box
          position absolute
          z-index 3
          border 2px solid #ffffff
          border-width 2px !important
          &.active
            border 2px solid #58b7ff
        .text
          padding: 2px
          height: 15px
          line-height: 15px
          font-size: 10px
          background-color: rgba($black,.5)
          position absolute
          left 2px
          bottom -1px
          width calc(100% - 4px)
          &.active
            color #58b7ff
        // img
        //   width: 100%
        //   height: 100%
</style>
<style lang="stylus" scoped>
.theme-app-b
  .scene
    padding: 8px 0 8px
    .group-wrap
      width: 100%
      .scene-group
        height: 50px
        display: flex
        justify-content: center
        // overflow-y: hidden
        // overflow-x: auto
        // white-space: nowrap
        .scene-group-item
          height: 40px

</style>